import "./style.css";
import { useLocation, useNavigate } from "react-router-dom";
import React, { useEffect, useState } from "react";
import { MenuList } from "../../router/page";
import { PoweroffOutlined } from "@ant-design/icons";
import Cookie from 'js-cookie'
import { useSelector } from 'react-redux'

const MyHeader = () => {
  // 获取当前路由信息
  const location = useLocation();

  const { userInfo } = useSelector((state) => state)

  const [info, setInfo] = useState("");

  const navigate = useNavigate();

  useEffect(() => {
    // 筛选路由信息
    const info = MenuList.find((item) => item.path === location.pathname);

    // 将标题赋值给info
    setInfo(info?.title);
  }, [location]);

  const outLogin = () => {
    Cookie.remove('token');

    navigate('/login')
  }

  return (
    <div className="my-header-box">
      <h1>{info}</h1>
      <div className="my-header-box-right">
        <p>{userInfo.name}</p>
        <span> | </span>
        <PoweroffOutlined onClick={outLogin} />
      </div>
    </div>
  );
};

export default MyHeader;
